import React, { Component } from 'react';
import {
	StyleSheet, Text, Animated, View, TouchableOpacity, Image
} from "react-native";
import moment from 'moment';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { orderStyle, commonStyle } from '../../customer-management/enterprise/details/_common/style';
import { OfferCommon } from '../_common/common';
import { title } from '../create/_components/form/offerMap';
import Utils from '../../../utils/utils';

const scale = GLOBAL.SCALE;
const copyIcon = require('../../../imgs/copyIcon.jpg')
let titleImgObj = require('../../../imgs/global/down.png');
export class ResourceBaseInfoCard extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: {},
			isHeight: true,
			startHeight: 0,
			imgObj: new Animated.Value(0)
		}
		this.onOff = true;
	}

	componentWillReceiveProps(props) {
		const { data } = props;
		this.setState({
			data
		})
	}

	componentWillMount() {
		const { data } = this.props;
		this.setState({
			data
		})
	}

	dateFormat(date) {
		return date ? `${moment(date).format('YYYY/MM/DD')}` : ''
	}

	// 动画
	_startAnimated = () => {
		let { isHeight, startHeight, heightObj, imgObj } = this.state;
		Animated.timing(imgObj, { toValue: isHeight ? 0 : 1, duration: 200, }).start()
		Animated.timing(heightObj, { toValue: isHeight ? startHeight : 0, duration: 300, })
			.start(() => { this.setState({ isHeight: !isHeight }) });
	}

	_onLayout = (event) => {
		let startHeight = 0;
		startHeight = event.nativeEvent.layout.height;
		if (this.onOff) {
			this.setState({
				startHeight,
				heightObj: new Animated.Value(startHeight),
				isHeight: false,
			})
			this.onOff = false
		}
	}

	render() {
		let { titleAction, copyPress, stylesData, checkApproveList, showStatus } = this.props;
		let { imgObj, heightObj, data } = this.state;
		let { periodNum, bizModelName, createTime, createByName, bizLineName, isUnite, areaIdName, warehouseAddressNameArry, deliveryBeginDate,
			deliveryEndDate, payStyleNames, payTypeNames, deliveryTypeNames, transportTypeNames, isMustTran, prepay,
			isCustIntentionPlan, intentionPlanBeginDate, intentionPlanEndDate, isFullPricesRequired, isFullPackageFix,
			isSubmitPrepay, cargoTypeName, salesType, prepayRate, ruleName, channel } = data || {};

		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '180deg'] //输出值
		})
		return (
			<View style={[styles.baseInfoCard, stylesData || null]}>
				<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
					<Text style={styles.baseInfoCardTitle}>场次 {periodNum || '-'}</Text>
					{titleAction ? <TouchableOpacity activeOpacity={.8} onPress={() => { copyPress && copyPress() }} style={{ flexDirection: 'row', alignItems: 'center', padding: 4 * scale }}>
						<Image style={styles.downImg} source={copyIcon} />
						<Text style={styles.titleAction}>复制场次</Text>
					</TouchableOpacity> : null}
					{showStatus ?
						<TouchableOpacity activeOpacity={.8} onPress={() => { checkApproveList && checkApproveList() }} style={{ flexDirection: 'row', alignItems: 'center', padding: 4 * scale }}>
							<Text style={styles.titleAction}>审批流</Text>
						</TouchableOpacity>
						: null
					}
				</View>
				<View style={orderStyle.block}>
					<TouchableOpacity activeOpacity={1} onPress={this._startAnimated} style={[styles.blockHead, commonStyle.row2]}>
						<Text style={styles.titleText}>基本信息</Text>
						<Animated.Image style={{ transform: [{ rotate: spin }], tintColor: style.color.themeColor, width: 15 * scale, height: 8 * scale }} source={titleImgObj}></Animated.Image>
					</TouchableOpacity>
					<Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
						<View ref='zy' onLayout={(event) => this._onLayout(event)} style={[styles.body]}>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>报盘模式</Text>
								<Text style={styles.valueText}>{bizModelName || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>采销规则</Text>
								<Text style={styles.valueText}>{ruleName || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>发布时间</Text>
								<Text style={styles.valueText}>{this.dateFormat(createTime) || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>申请人</Text>
								<Text style={styles.valueText}>{createByName || '-'}（{bizLineName || '-'}）</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>业务类型</Text>
								<Text style={styles.valueText}>{isUnite == 'Y' ? '统销' : '自营'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>{title.area[salesType]}</Text>
								<Text style={styles.valueText}>{areaIdName || '-'}</Text>
							</View>
							{
								warehouseAddressNameArry && warehouseAddressNameArry.length && warehouseAddressNameArry.map((item, index) => {
									return (
										<View key={index} style={styles.itemInfo}>
											<Text style={styles.labelText}>仓库地址{warehouseAddressNameArry.length !== 1 ? (index + 1) : ''}</Text>
											<Text style={styles.valueText}>{item || '-'}</Text>
										</View>
									)
								})
							}
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>交货期限</Text>
								<Text style={styles.valueText}>{`${this.dateFormat(deliveryBeginDate)}-${this.dateFormat(deliveryEndDate)}`}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>质量标准</Text>
								<Text style={styles.valueText}>{cargoTypeName || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>付款方式</Text>
								<Text style={styles.valueText}>{payStyleNames || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>付款类型</Text>
								<Text style={styles.valueText}>{payTypeNames || '-'}</Text>
							</View>
							{
								Utils.numberToString(prepayRate) ? <View style={styles.itemInfo}>
									<Text style={styles.labelText}>保证金比例</Text>
									<Text style={styles.valueText}>{Utils.numberToString(prepayRate) ? (prepayRate + '%') : null}</Text>
								</View> : null
							}
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>交付方式</Text>
								<Text style={styles.valueText}>{deliveryTypeNames || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>运输方式</Text>
								<Text style={styles.valueText}>{transportTypeNames || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>是否需要转成交</Text>
								<Text style={styles.valueText}>{OfferCommon.Y_OR_N[isMustTran] || '-'}</Text>
							</View>
							<View style={styles.itemInfo}>
								<Text style={styles.labelText}>{title.submission[salesType]}</Text>
								<Text style={styles.valueText}>{OfferCommon.Y_OR_N[isCustIntentionPlan] || '-'}{OfferCommon.Y_OR_N[isCustIntentionPlan] == '是' ? `（${this.dateFormat(intentionPlanBeginDate)}-${this.dateFormat(intentionPlanEndDate)}）` : ''}</Text>
							</View>
							{isFullPricesRequired ? <View style={styles.itemInfo}>
								<Text style={styles.labelText}>是否所有价格必填</Text>
								<Text style={styles.valueText}>{OfferCommon.Y_OR_N[isFullPricesRequired] || '-'}</Text>
							</View> : null}
							{isFullPackageFix ? <View style={styles.itemInfo}>
								<Text style={styles.labelText}>是否整包提报</Text>
								<Text style={styles.valueText}>{OfferCommon.Y_OR_N[isFullPackageFix] || '-'}</Text>
							</View> : null}
							{isSubmitPrepay ? <View style={styles.itemInfo}>
								<Text style={styles.labelText}>是否缴纳保证金</Text>
								<Text style={styles.valueText}>{OfferCommon.Y_OR_N[isSubmitPrepay] || '-'}{OfferCommon.Y_OR_N[isSubmitPrepay] == '是' ? `（¥${prepay || '-'}元）` : ''}</Text>
							</View> : null}
						</View>
					</Animated.View>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	blockHead: {
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale
	},
	titleText: {
		fontSize: 12 * scale,
		fontWeight: 'bold'
	},
	body: {
		padding: 6 * scale
	},
	itemInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-start',
		marginTop: 12 * scale
	},
	labelText: {
		fontSize: 12 * scale,
		opacity: 0.6,
		width: 112 * scale
	},
	valueText: {
		flex: 1,
		fontSize: 12 * scale,
		flexWrap: 'wrap',
	},
	baseInfoCard: {
		padding: 12 * scale
	},
	baseInfoCardTitle: {
		marginTop: 10 * scale,
		marginBottom: 12 * scale,
		fontSize: 14 * scale,
		fontWeight: 'bold'
	},
	titleAction: {
		fontSize: 12 * scale,
		color: style.color.themeColor
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale,
		marginRight: 4 * scale
	},
})